<script setup>
import { ref } from 'vue'

const templates = ref([
  {
    id: 1,
    name: '像素冒险家',
    thumbnail: 'https://placekitten.com/400/600',
    style: 'game',
    color: 'blue',
    likes: 156,
    uses: 1200,
    tags: ['游戏风格', '创意', '独特']
  },
  {
    id: 2,
    name: '复古街机',
    thumbnail: 'https://placekitten.com/401/600',
    style: 'retro',
    color: 'red',
    likes: 89,
    uses: 750,
    tags: ['复古', '街机', '经典']
  },
  {
    id: 3,
    name: '赛博朋克',
    thumbnail: 'https://placekitten.com/402/600',
    style: 'cyberpunk',
    color: 'purple',
    likes: 201,
    uses: 980,
    tags: ['未来感', '科技', '炫酷']
  }
])

const filters = ref({
  style: 'all',
  color: 'all'
})

const styles = [
  { id: 'all', name: '全部风格' },
  { id: 'game', name: '游戏风' },
  { id: 'retro', name: '复古风' },
  { id: 'cyberpunk', name: '赛博朋克' }
]

const colors = [
  { id: 'all', name: '全部配色' },
  { id: 'blue', name: '蓝色系' },
  { id: 'red', name: '红色系' },
  { id: 'purple', name: '紫色系' }
]
</script>

<template>
  <div class="template-gallery">
    <div class="gallery-header">
      <h1 class="pixel-title">选择你的简历模板</h1>
      <div class="filter-section">
        <div class="filter-group">
          <button 
            v-for="style in styles"
            :key="style.id"
            :class="['filter-btn', filters.style === style.id ? 'active' : '']"
            @click="filters.style = style.id"
          >
            {{ style.name }}
          </button>
        </div>
        <div class="filter-group">
          <button 
            v-for="color in colors"
            :key="color.id"
            :class="['filter-btn', filters.color === color.id ? 'active' : '']"
            @click="filters.color = color.id"
          >
            {{ color.name }}
          </button>
        </div>
      </div>
    </div>

    <div class="templates-grid">
      <div 
        v-for="template in templates"
        :key="template.id"
        class="template-card pixel-card"
      >
        <div class="template-preview">
          <img :src="template.thumbnail" :alt="template.name">
          <div class="preview-overlay">
            <button class="pixel-btn preview-btn">预览</button>
            <button class="pixel-btn use-btn">使用模板</button>
          </div>
        </div>
        
        <div class="template-info">
          <h3>{{ template.name }}</h3>
          <div class="template-tags">
            <span 
              v-for="(tag, index) in template.tags"
              :key="index"
              class="tag"
            >
              {{ tag }}
            </span>
          </div>
          
          <div class="template-stats">
            <span>
              <i>👁️</i> {{ template.uses }}
            </span>
            <span>
              <i>❤️</i> {{ template.likes }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 像素风格的分页器 -->
    <div class="pixel-pagination">
      <button class="pixel-btn page-btn">◀</button>
      <div class="page-numbers">
        <button class="pixel-btn page-number active">1</button>
        <button class="pixel-btn page-number">2</button>
        <button class="pixel-btn page-number">3</button>
      </div>
      <button class="pixel-btn page-btn">▶</button>
    </div>
  </div>
</template>

<style scoped>
.template-gallery {
  padding: 1rem;
}

.gallery-header {
  margin-bottom: 2rem;
}

.pixel-title {
  font-family: 'PixelFont', sans-serif;
  font-size: 2rem;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.filter-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  padding: 0.8rem 1.5rem;
  border: var(--pixel-border) solid var(--text-primary);
  background: var(--background-light);
  color: var(--text-primary);
  cursor: pointer;
  font-family: 'PixelFont', sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.filter-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--pixel-shadow);
}

.filter-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.template-card {
  overflow: hidden;
  transition: transform 0.3s;
}

.template-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

.template-preview {
  position: relative;
  height: 450px;
  overflow: hidden;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.template-preview:hover .preview-overlay {
  opacity: 1;
}

.preview-btn, .use-btn {
  min-width: 150px;
}

.template-info {
  padding: 1.5rem;
}

.template-info h3 {
  font-family: 'PixelFont', sans-serif;
  margin-bottom: 1rem;
}

.template-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tag {
  background: var(--secondary-color);
  color: white;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 4px;
}

.template-stats {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
}

.pixel-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.page-numbers {
  display: flex;
  gap: 0.5rem;
}

.page-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PixelFont', sans-serif;
}

.page-number.active {
  background: var(--primary-color);
  color: white;
}

.page-btn {
  background: var(--text-primary);
  color: white;
}
</style> 